<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8"/>
	<title>用户银行卡列表</title>
	<link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" type="text/css" th:href="@{/css/news.css}" media="all" />
</head>
<style type="text/css">
	#direct{width:150px}
</style>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
	<form id="searchForm" name="searchForm" class="layui-form" action="/member/userBankCard.html">
		<input type="hidden" id="pageNum" name="pageNum" th:value="${page}?${page.pageNum}"/>
		  <div class="layui-form-item">
			<label class="layui-form-label">用户名:</label>
		    <div class="layui-input-inline" id="direct">
		    	<input  type="text" class="layui-input" name="username"  th:value="${bankCardInfoVo}?${bankCardInfoVo.username}"/>
		    </div>
	<!-- 	    <label class="layui-form-label">发卡银行:</label>
		    <div class="layui-input-inline" id="direct">
		    	<input  type="text" class="layui-input" name="bankId"  th:value="${bankCardInfoVo}?${bankCardInfoVo.bankId}"/>
		    </div> -->
		  <!-- </div> -->
		    <button class="layui-btn search_btn"><i class="layui-icon">&#xe615;</i>查询</button>
         </div>
	</form>
	</blockquote>
	<div class="layui-form news_list">
	  	<table class="layui-table">
		    <colgroup>
				<col/>
				<col/>
				<col/>
				<col/>
				<col/>
				<col/>
				<col/>
				<col/>
		    </colgroup>
		    <thead>
				<tr>
					<th>用户名</th>
					<th>持卡人姓名</th>
					<th>身份证号</th>
					<th>卡号</th>
					<th>预留手机号</th>
					<th>卡类型</th>
					<th>是否解绑</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr> 
		    </thead>
		    <tbody class="news_content">
		  	  <th:block th:if="${not #lists.isEmpty(page.list)}">
			    	<tr th:each="item:${page.list}">
				    	<td  th:text="${item.username}"></td>
				    	<td  th:text="${item.name}"></td>
				    	<td  th:text="${item.idCardNo}"></td>
				    	<td  th:text="${item.bankCardNo}"></td>
				    	<td  th:text="${item.mobile}"></td>
				    	<th:block th:switch="${item.type}">
						    <td  th:case="0">储蓄卡</td>
							<td  th:case="1">信用卡</td>
						</th:block>
				    	<th:block th:switch="${item.deleted}">
						    <td  th:case="0">否</td>
							<td  th:case="1">是</td>
						</th:block>
				    	<td  th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
				    	<td>
				    		<a th:data="${item.id}" th:remove="${item.deleted == 0}?none:all" class="layui-btn layui-btn-mini unBundCard layui-btn-warm">解绑</a>
				    	</td>
					</tr>
				</th:block>
		    </tbody>
		</table>
	</div>
	<div id="paged" align="right"></div>
	<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
	<script type="text/javascript" th:src="@{/jquery/jquery-3.2.1.min.js}"></script>
	</body>
	<script th:inline="javascript">
         layui.use(['laypage','laydate'], function(){             
        	  var laypage = layui.laypage,$=layui.jquery;
        	  var laydate = layui.laydate;
        	  //执行一个laydate实例
        	  laydate.render({
        	    elem: '#startTime' //指定元素
        	  });
        	  //执行一个laydate实例
        	  laydate.render({
        	    elem: '#endTime' //指定元素
        	  });
        	  //执行一个laypage实例
        	  laypage.render({
        	    elem: 'paged', //注意，这里的 test1 是 ID，不用加 # 号
        	    curr: [[${page.pageNum}]],
        	    count: [[${page.total}]], //数据总数，从服务端得到
        	    layout: ['count', 'prev', 'page', 'next'],
                jump: function(obj, first){
                    //得到了当前页，用于向服务端请求对应数据
                    var curr = obj.curr;
                    $("#pageNum").val(curr);
                    if(!first) {
                        $("#searchForm").submit();
					}
                }
        	  });
        	});
         
         layui.use('layer', function(){
             var layer = layui.layer,$=layui.jquery;

             $(".unBundCard").bind("click",function () {
                 var id = $(this).attr('data');
                 layer.confirm('确定要解绑银行卡吗?', {icon: 3, title:'提示'}, function(index){
                     $.post('unBundCard', {id:id}, function(data){
                         location.reload();
                     });
                 });
             });

             /**
 			 * 查看
              */
             $("#info").bind("click",function() {
            	 var id = $(this).attr('data');
             	//Ajax获取
             	form_html(id,'查看用户信息');
             });
             
              function form_html(id,version,title){
               	$.post('userInfo.html', {userId:id}, function(data){
             	  	layer.open({
             	  	  type: 1,
               		  title: title
               		  ,area: ['750px', '600px']
               		  ,shade: 0
               		  ,content: data
            			  ,yes: function(index, layero){
            				  layer.close(index);
            				}
               		}); 
             	}); 
             };
         });
        
     
        
         layui.use('laydate', function(){
        	  var laydate = layui.laydate;
        	  //执行一个laydate实例
        	  laydate.render({
        	    elem: '#startTime' //指定元素
        	    ,format: 'yyyy-MM-dd HH:mm:ss'
        	  });
        	  //执行一个laydate实例
        	  laydate.render({
        	    elem: '#endTime' //指定元素
        	    ,format: 'yyyy-MM-dd HH:mm:ss'
        	  });
        	});  
	</script>
</html>